import React from 'react'
import ReactDOM from 'react-dom';

// class Demo extends Component {

//     state = {count : 0}
//     add = ()=> {
//         this.setState( state => ({count:state.count+1}))
//     }
    // componentDidMount() {
    //     setInterval(() => {
    //         this.setState( state => ({count:state.count+1}))
    //     }, 1000);
    // }
//   render() {
//     return (
//       <div>
//           <h2>和为： {this.state.count}</h2>
//           <button onClick={this.add}>点我+1</button>
//       </div>
//     )
//   }
// }
function Demo () {
    const [count,setCount] = React.useState(0)
    // 0为初始化的值

    React.useEffect(()=> {
        console.log( ReactDOM );
        let timer = setInterval(() => {
            setCount( count => count+1)
        }, 1000);
        return ()=> {
            clearInterval(timer)
        }
    },[])

   function add() {
       setCount( count => count+1)
   }
//    卸载组件
function unmount(){
    // this.root.unmount();
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
    return (
        <div>
            <h2>和为： {count}</h2>
            <button onClick={add}>点我+1</button> 
            <hr />
            <button onClick={unmount}>卸载组件</button>
        </div>
    )
}

export default Demo